<template>
  <!-- 审批人 -->
  <el-drawer
    :append-to-body="true"
    title="节点属性"
    v-model="visible"
    custom-class="set_promoter"
    :show-close="true"
    :size="550"
    :before-close="saveApprover"
  >
    <div class="demo-drawer__content">
      <div class="drawer_content">
        <el-form-item label="条件描述：">
          <el-input v-model="conForm.name" />
        </el-form-item>
        <div class="tabflex">
          <div v-if="tabpage != 1">
            <span @click="tabpage = 1">设置审批人</span>
          </div>
          <div v-if="tabpage == 1">
            <span class="alink" @click="tabpage = 1">设置审批人</span>
            <div class="tabline"></div>
          </div>
          <div v-if="tabpage != 2">
            <span @click="tabpage = 2">表单操作权限</span>
          </div>
          <div v-if="tabpage == 2">
            <span class="alink" @click="tabpage = 2">表单操作权限</span>
            <div class="tabline"></div>
          </div>
          <div v-if="tabpage != 3">
            <span @click="tabpage = 3">审批区域设置</span>
          </div>
          <div v-if="tabpage == 3">
            <span class="alink" @click="tabpage = 3">审批区域设置</span>
            <div class="tabline"></div>
          </div>
        </div>
      </div>
      <section v-if="tabpage == 1">
        <el-form :model="conForm" label-width="87px">
          <div class="selectpeople">
            <div class="m-b-10">
              <el-button type="primary">修改审批</el-button>
            </div>
            <el-tag type="info" class="mx-1" size="large" closable
              >Large</el-tag
            >
          </div>
          <el-divider />
          <h3>执行模式</h3>
          <el-form-item label="">
            <el-radio-group v-model="conForm.radio">
              <el-radio :label="1">单人</el-radio>
              <el-radio :label="2">全体执行</el-radio>
              <el-radio :label="3">竞争执行</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
          <h3 class="m-b-10">合并处理设置</h3>
          <el-form-item label="">
            <el-checkbox-group v-model="conForm.marge">
              <el-checkbox label="1">审批人是发起人</el-checkbox>
              <el-checkbox label="2">审批人已审批过</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="态度：">
            <el-radio-group v-model="conForm.opinion">
              <el-radio :label="0">空</el-radio>
              <el-radio :label="1">处理人上次处理意见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="意见：">
            <el-radio-group v-model="conForm.opinion">
              <el-radio :label="0">空</el-radio>
              <el-radio :label="1">处理人上次处理意见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider />
        </el-form>
      </section>
      <section v-if="tabpage == 2">
        <div class="mytable">
          <div class="tablerow tableheader">
            <div>主表字段</div>
            <div>查看</div>
            <div>编辑</div>
            <div>隐藏</div>
          </div>
          <div
            class="tablebody tablerow"
            v-for="(item, index) in radio"
            :key="item.name"
            :class="index % 2 == 0 ? 'graybg' : ''"
          >
            <div>
              <div>{{ item.name }}</div>
            </div>
            <div>
              <div
                class="checkmode"
                :class="item.check ? 'checkmodeactive' : ''"
                @click="item.check = !item.check"
              ></div>
            </div>
            <div>
              <div
                class="checkmode"
                :class="item.edit ? 'checkmodeactive' : ''"
                @click="item.edit = !item.edit"
              ></div>
            </div>
            <div>
              <div
                class="checkmode"
                :class="item.hide ? 'checkmodeactive' : ''"
                @click="item.hide = !item.hide"
              ></div>
            </div>
          </div>
        </div>
        <div class="mytable">
          <div class="tablerow tableheader">
            <div>明细表字段</div>
            <div>查看</div>
            <div>编辑</div>
            <div>隐藏</div>
          </div>
          <div
            class="tablebody tablerow"
            v-for="(item, index) in radio"
            :key="item.name"
            :class="index % 2 == 0 ? 'graybg' : ''"
          >
            <div>
              <div>{{ item.name }}</div>
            </div>
            <div>
              <div
                class="checkmode"
                :class="item.check ? 'checkmodeactive' : ''"
                @click="item.check = !item.check"
              ></div>
            </div>
            <div>
              <div
                class="checkmode"
                :class="item.edit ? 'checkmodeactive' : ''"
                @click="item.edit = !item.edit"
              ></div>
            </div>
            <div>
              <div
                class="checkmode"
                :class="item.hide ? 'checkmodeactive' : ''"
                @click="item.hide = !item.hide"
              ></div>
            </div>
          </div>
        </div>
      </section>
      <section v-if="tabpage == 3">
        <div class="selectpeople">
          <div class="m-b-10">
            <el-button type="primary">添加审批</el-button>
          </div>
        </div>
        <div class="mytable">
          <div class="tablerow tableheader">
            <div>行号</div>
            <div>控件</div>
            <div>内容</div>
          </div>
          <div
            class="tablebody tablerow auditarea"
            v-for="(item, index) in radio"
            :key="item.name"
            :class="index % 2 == 0 ? 'graybg' : ''"
          >
            <div>
              <el-input v-model="item.name" placeholder="" />
            </div>
            <div>
              <el-select v-model="item.name" placeholder="Select">
                <el-option label="文本" value="1" />
                <el-option label="文本框" value="2" />
                <el-option label="数字" value="3" />
                <el-option label="日期" value="4" />
                <el-option label="单选" value="5" />
                <el-option label="多选" value="6" />
                <el-option label="下拉" value="7" />
              </el-select>
            </div>
            <div>
              <el-input v-model="item.name" placeholder="" />
            </div>
          </div>
        </div>
      </section>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveApprover">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <employees-dialog
        v-model:visible="approverVisible"
        v-model:data="checkedList"
        @change="sureApprover"
      />
      <role-dialog
        v-model:visible="approverRoleVisible"
        v-model:data="checkedRoleList"
        @change="sureRoleApprover"
      />
    </div>
  </el-drawer>
</template>
<script setup>
import employeesDialog from "../dialog/employeesDialog.vue";
import roleDialog from "../dialog/roleDialog.vue";
import $func from "../../plugins/preload.js";
// import { mapState, mapMutations } from "../../plugins/lib";
import { ref, watch, reactive, computed } from "vue";
import { storeToRefs } from "pinia";
import { workFlowStoreHook } from "@/store/modules/workflow";
// let props = defineProps({
//   directorMaxLevel: {
//     type: Number,
//     default: 0
//   }
// });
let approverConfig = ref({});
let approverVisible = ref(false);
let approverRoleVisible = ref(false);
let checkedRoleList = ref([]);
let checkedList = ref([]);
let conForm = reactive({});
let tabpage = ref(1);
let { approverConfig1, approverDrawer } = storeToRefs(workFlowStoreHook());
let radio = ref([
  {
    name: "[主表]申请人",
    check: false,
    edit: true,
    hide: false
  },
  {
    name: "[主表]部门",
    check: false,
    edit: true,
    hide: false
  },
  {
    name: "[主表]人员",
    check: true,
    edit: true,
    hide: false
  }
]);
// let { approverConfig1, approverDrawer } = mapState();
let visible = computed({
  get() {
    return approverDrawer.value;
  },
  set() {
    closeDrawer();
  }
});
watch(approverConfig1, val => {
  approverConfig.value = val.value;
});

// let { setApproverConfig, setApprover } = mapMutations();

let changeRange = () => {
  approverConfig.value.nodeUserList = [];
};
const changeType = val => {
  approverConfig.value.nodeUserList = [];
  approverConfig.value.examineMode = 1;
  approverConfig.value.noHanderAction = 2;
  if (val == 2) {
    approverConfig.value.directorLevel = 1;
  } else if (val == 4) {
    approverConfig.value.selectMode = 1;
    approverConfig.value.selectRange = 1;
  } else if (val == 7) {
    approverConfig.value.examineEndDirectorLevel = 1;
  }
};
const addApprover = () => {
  approverVisible.value = true;
  checkedList.value = approverConfig.value.nodeUserList;
};
const addRoleApprover = () => {
  approverRoleVisible.value = true;
  checkedRoleList.value = approverConfig.value.nodeUserList;
};
const sureApprover = data => {
  approverConfig.value.nodeUserList = data;
  approverVisible.value = false;
};
const sureRoleApprover = data => {
  approverConfig.value.nodeUserList = data;
  approverRoleVisible.value = false;
};
const saveApprover = () => {
  approverConfig.value.error = !$func.setApproverStr(approverConfig.value);
  workFlowStoreHook().setApproverConfig({
    value: approverConfig.value,
    flag: true,
    id: approverConfig1.value.id
  });
  closeDrawer();
};
const closeDrawer = () => {
  workFlowStoreHook().setApprover(false);
};
</script>
<style lang="scss">
.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

  .approver_self_select,
  .approver_content {
    .el-button {
      margin-bottom: 20px;
    }
  }

  .approver_content,
  .approver_some,
  .approver_self_select {
    .el-radio-group {
      display: unset;
    }

    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
  }

  .approver_manager p {
    line-height: 32px;
  }

  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }

  .approver_self {
    padding: 28px 20px;
  }

  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 0;
  }

  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
  .tabflex {
    display: flex;
    cursor: pointer;
    > div {
      width: 33%;
      text-align: center;
    }
  }
  .tabline {
    margin: 6px auto;
  }
  .selectpeople {
    padding: 16px 0 16px 40px;
  }
  .m-b-10 {
    margin-bottom: 10px;
  }
  .demo-drawer__footer {
    text-align: center;
  }
  h3 {
    font-weight: bold;
    color: #555;
  }
  .auditarea {
    > div {
      padding: 0 4px;
    }
  }
}
</style>
